<template>
	<view class="report uni-common-mt">
		<view class="form form-a">
			<view class="form-group">
				<block v-for="(item, index) in reportData" :key="index">
					<view class="form-item"
						:class="{'search-wrap': item.type == 'search', 'form-item-hor': item.type == 'select' || item.type == 'switch'}"
						v-show="!item.isHide">
						<view class="form-item-header" v-if="item.type !== 'search'">{{ item.label}}：</view>
						<view class="form-item-body">
							<block v-if="item.type == 'select'">
								<block v-if="item.field == 'eventTypeLv3'">
									<view class="select" @tap="bindPickerChange2(item.field)">
										<view class="selected" >
											{{item.value | getDictLabel(item.options, 'value', 'name') || '请选择'}}
										</view>
										<view class="select-icon">
											<uni-icons type="arrowdown" size="22" color="#c4c4c4" />
										</view>
									</view>
								</block>
								<block v-else>
									<picker :value="item.index" :range="item.options" range-key="name"
										@change="bindPickerChange($event, item.field)">
										<view class="select">
											<view class="selected">
												{{item.value | getDictLabel(item.options, item.field == 'eventType' || item.field == 'eventSrcType' ? 'code' : 'id') || '请选择'}}
											</view>
											<view class="select-icon">
												<uni-icons type="arrowdown" size="22" color="#c4c4c4" />
											</view>
										</view>
									</picker>
								</block>
							</block>
							<view v-else-if="item.type == 'search'" class="search">
								<input v-model="item.value" class="search-control" placeholder="请输入小类名称(选填)" />
								<button @tap="searchType2(item.field)" class="search-btn">搜索</button>
							</view>

							<uni-swiper-dot v-else-if="item.type == 'swiper'" :current="item.index" :info="item.options"
								mode="dot"
								:dotsStyles="{selectedBackgroundColor: '#f29004', selectedBorder: '1px solid #f29004'}">
								<swiper v-show="item.options.length > 0" class="swiper-box"
									@change="bindSwiperChange($event, item.field)">
									<swiper-item v-for="(ite ,ind) in item.options" :key="ind">
										<view class="swiper-item">
											<image class="image" :src="ite" mode="aspectFit" />
										</view>
									</swiper-item>
								</swiper>
							</uni-swiper-dot>

							<view v-else-if="item.type == 'addr'" class="card card-address">
								<textarea v-model="item.value" class="card-content" placeholder="请输入或选择定位获取位置信息">
								</textarea>
								<view class="card-icon" @tap="openMap">
									<image class="icon" src="@/static/icon/iv_location.png"></image>
								</view>
							</view>

							<block v-else-if="item.type == 'upload'">
								<view class="list list-p">
									<view class="list-group">
										<view class="list-item" v-for="(baseImage, index) in item.images" :key="index">
											<view class="card card-a" @tap="viewPic(item,index)">
												<view class="card-header">
												</view>
												<view class="delete" @tap.stop.prevent="delPic(item,index)">
													<image class="icon" mode="aspectFit"
														src="@/static/icon/delete-icon.png">
													</image>
												</view>
												<view class="card-body">
													<image class="icon" mode="aspectFit" :src="baseImage"></image>
												</view>
											</view>
										</view>

										<view class="list-item">
											<view class="card card-a upload" @tap="getPic(item)">
												<view class="card-body">
													<image class="icon" mode="aspectFit"
														src="@/static/icon/iv_pic_add.png"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="form-item-tip" v-if="item.tips">{{item.tips}}</view>
							</block>
							
							<block v-else-if="item.type == 'switch'">
								<view class="switch"><switch :checked="item.value" @change="switchChange($event, item.field)"/></view>
							</block>
							
							<block v-else>
								<textarea v-model="item.value" @input="changeLength($event, item.field)" maxlength="250"
									class="form-control form-control-a"></textarea>
								<view class="form-item-tip" v-if="item.tips">{{item.tips}}</view>
							</block>

						</view>
					</view>

				</block>
			</view>
		</view>
		
		<view class="btns">
			<view class="btns-group">
				<button class="btn btn-a" @tap="confirmReport">提交</button>
			</view>
		</view>
		
		<modal-typeLv3 ref="typeLv3" :list="typeLv3s" @sendData="selectTypelv3"></modal-typeLv3>
		
		<uni-popup ref="typelvs">
			<view class="list list-types">
				<view class="list-group">
					<view class="list-item" v-for="(evt, index) in typelvs" :key="index">
						<view class="list-item-btn" @tap="selectTypelv2(evt)">{{ evt.typelv2name }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {queryEventType,queryEventTypelv1,queryEventTypelv2,queryEventTypelv3,queryEventTypelv,queryEventTypeByLv2Name,createEevet, queryEventDetail} from '@/api/configure.js';
	import {deepClone,mergeUrls,getUserInfo,formatDateStr,getBaseImages,reverseGeocode,previewImage,chooseImage, chooseImage2, getSystemInfo} from '@/util/util.js';
	import configUrl from '@/util/url.js';
	import ModalTypeLv3 from '@/components/modal/typeLv3.vue';
	
	export default {
		components: {
			ModalTypeLv3
		},
		data() {
			return {
				systemVersion: '0',
				userInfo: {},
				roleKey: '',
				reportData: [{
					type: 'select',
					field: 'eventSrcType',
					label: '案件来源',
					value: null,
					index: null,
					options: [{
						name: '发现上报',
						code: 5
					}, {
						name: '自行处理',
						code: 6
					}]
				}, {
					type: 'search',
					field: 'search',
					value: '',
					index: '',
					options: []
				}, {
					type: 'select',
					field: 'eventType',
					label: '案件类别',
					value: null,
					index: null,
					options: [],
					targetField: 'eventTypeLv1'
				}, {
					type: 'select',
					field: 'eventTypeLv1',
					label: '大类名称',
					value: null,
					index: null,
					options: [],
					targetField: 'eventTypeLv2'
				}, {
					type: 'select',
					field: 'eventTypeLv2',
					label: '小类名称',
					value: null,
					index: null,
					options: [],
					targetField: 'eventTypeLv3'
				}, {
					type: 'select',
					field: 'eventTypeLv3',
					label: '立案条件',
					value: null,
					index: null,
					options: [],
					targetField: 'eventTypeLv4'
				}, {
					type: 'swiper',
					field: 'eventTypeLv4',
					label: '标准图片',
					options: [],
					index: 0
				}, {
					type: 'addr',
					field: 'eventAddress',
					label: '案件位置',
					value: '',
					errorMessage: '请选择位置'
				}, {
					type: 'textarea',
					field: 'eventDescribe',
					label: '案件描述',
					value: '',
					tips: '*字数限制250,剩余字数250/250'
				}, {
					type: 'switch',
					field: 'compress',
					label: '压缩图片',
					value: true
				},{
					type: 'upload',
					field: 'beforeImg',
					label: '处理前照片',
					value: '',
					images: [],
					baseImages: [],
					tips: '*请在拍照时，确保事件与环境的位置关系与拍摄全景，如果一张照片无法完全表现时，可拍摄多张！'
				}, {
					type: 'upload',
					field: 'afterImg',
					label: '处理后照片',
					value: '',
					images: [],
					baseImages: [],
					tips: '*请在拍照时，确保事件与环境的位置关系与拍摄全景，如果一张照片无法完全表现时，可拍摄多张！',
					isHide: true
				}],
				typelvs: [],
				typeLv3s: [],
				longitude: '',
				latitude: '',
				xjyIds: '',
				address: "陕西省西安市碑林区张家村街道华融国际商务大厦B座华融国际商务大厦B-座",
				sendData: {
					eventSrcType: '', //案件来源
					eventType: '', //案件类别
					eventTypeLv1: '', //案件大类
					eventTypeLv2: '', //案件小类
					eventTypeLv3: '', //立案标准
					eventAddress: '', //描述
					eventDescribe: '', //案件描述
					eventReportPhone: '', //上报电话
					eventReportName: '', //上报人
					createUser: '', //上报人id
					lnglats: '', //坐标108.223222 34.121221
					beforeImg: '', //上报图片
					afterImg: '',
					xjyIds: '', //巡检ID
					partsId: '' ,//地图页面选定的部件id
				}
			}
		},
		methods: {
			confirmReport(){
				let _this = this;
				
				uni.showModal({
					content: '确认提交吗？',
					success(res) {
						if (res.confirm) {
							_this.report();
						} else if (res.cancel) {
				
						}
					}
				});
			},
			async report() {
				let isNotPassItem = this.reportData.find( item => {
					if(item.field == 'search' || item.field == 'eventTypeLv4' || item.field == 'compress') {
						
					} else if(item.field == 'eventAddress'){
						return !(item.value && this.longitude);
					} else if(item.type == 'upload') {
						if(!item.isHide){
							return item.images.length == 0;
						}
					} else {
						return !item.value;
					}
				})
				
				if(isNotPassItem){
					let title = isNotPassItem.errorMessage || `${isNotPassItem.label}不能为空`;
					
					uni.showToast({
						title,
						duration: 2000,
						icon: 'none'
					});
					
					return ;
				}
				
				//转base
				let imagesItem = this.reportData.find(item => item.field == 'beforeImg');
				let baseImages = await getBaseImages(imagesItem.images);
				
				imagesItem.baseImages = [...baseImages];
				
				let afterImagesItem = this.reportData.find(item => item.field == 'afterImg');
				let baseAfterImages = await getBaseImages(afterImagesItem.images);
				
				afterImagesItem.baseImages = [...baseAfterImages];
				
				Object.keys(this.sendData).forEach((key) => {
					switch (key) {
						case 'lnglats':
							this.sendData[key] = `${this.longitude} ${this.latitude}`;
							break;
						case 'eventReportPhone':
							this.sendData[key] = this.userInfo.phonenumber;
							break;
						case 'eventReportName':
							this.sendData[key] = this.userInfo.userName;
							break;
						case 'createUser':
							this.sendData[key] = this.userInfo.userId;
							break;
						case 'beforeImg':
							let images = this.reportData.find(item => item.field == key);
							
							let baseImages = images.baseImages.map(item => ({
								image: item.split(',')[1]
							}));
														
							this.sendData[key] = JSON.stringify(baseImages);
							break;
						case 'afterImg':
							let afterImages = this.reportData.find(item => item.field == key);
							
							let afterBaseImages = afterImages.baseImages.map(item => ({
								image: item.split(',')[1]
							}));
							
							this.sendData[key] = JSON.stringify(afterBaseImages);
							break;
						case 'eventSrcType':
							let eventSrcType = this.reportData.find(item => item.field == key);
							
							this.sendData[key] = this.roleKey == 'dcy' && eventSrcType.value == 5 ? 10 : eventSrcType.value;
							break;
						case 'xjyIds':
							this.sendData[key] = this.roleKey == 'dcy' ? this.xjyIds : '';
							break;
						case 'partsId':
							
							break;
						case 'compress':
							break;
						default:
							let item = this.reportData.find(item => item.field == key);
							this.sendData[key] = item.value;
					}

				})
				
				let {code} = await createEevet(this.sendData);

				if (code == 0) {
					uni.showToast({
						title: '提交成功',
						duration: 2000,
						icon: 'none'
					});

					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				}
			},
			openMap() {
				let params = {};
				let eventTypeLv3 = this.reportData.find(item => item.field == 'eventTypeLv3');
				let eventTypeLv2 = this.reportData.find(item => item.field == 'eventTypeLv2');
				
				params.eventTypelv3Id = eventTypeLv3['value'];
				params.eventTypelv2Id = eventTypeLv2['value'];
				
				if(!params.eventTypelv3Id){
					uni.showToast({
						title: '请选择立案条件！',
						duration: 2000,
						icon: 'none'
					});
					
					return ;
				}
				
				let url = mergeUrls('/pages/map/map', params);
				
				uni.navigateTo({
					url
				});
			},
			async selectTypelv2(evt) {
				let eventType = this.reportData.find(item => item.field == 'eventType');
				
				eventType.value = evt.typecode;
				eventType.index = eventType.options.findIndex(item => item.code == eventType.value);

				await this.createPicker(eventType.targetField, eventType.value);

				let eventTypeLv1 = this.reportData.find(item => item.field == 'eventTypeLv1');

				eventTypeLv1.value = evt.typelv1id;
				eventTypeLv1.index = eventTypeLv1.options.findIndex(item => item.id == eventTypeLv1.value);

				await this.createPicker(eventTypeLv1.targetField, eventTypeLv1.value);

				let eventTypeLv2 = this.reportData.find(item => item.field == 'eventTypeLv2');

				eventTypeLv2.value = evt.typelv2id;
				eventTypeLv2.index = eventTypeLv2.options.findIndex(item => item.id == eventTypeLv2.value);

				await this.createPicker(eventTypeLv2.targetField, eventTypeLv2.value);

				this.$refs.typelvs.close();
			},
			async searchType2(field) {
				let search = this.reportData.find(item => item.field == field);

				if (!search.value) {
					return;
				}

				let params = {
					name: search.value
				}

				let {data, code} = await queryEventTypeByLv2Name(params);

				this.typelvs = data.slice(0);
				this.$refs.typelvs.open();
			},
			async createSwiper(targetField, images) {
				let targetSwiper = this.reportData.find(swiper => swiper.field == targetField);

				targetSwiper.options = images.map(image => `${configUrl.CASEIMAGE_URL}${image.url.substr(1)}`);
			},
			async clearPicker(targetField) {
				let target = this.reportData.find(select => select.field == targetField);

				if (target.type == 'swiper') {
					target.index = 0;
				} else {
					target.value = null;
					target.index = null;
				}
				target.options = [];

				if (target.targetField) {
					this.clearPicker(target.targetField);
				}
			},
			async createPicker(targetField, val) {
				let type = '';

				switch (targetField) {
					case 'eventTypeLv1':
						type = 'eventTypelv1';
						break;
					case 'eventTypeLv2':
						type = 'eventTypelv2';
						break;
					case 'eventTypeLv3':
						type = 'eventTypelv3';
						break;
				}

				let params = {
					type,
					val
				};
				let {data} = await queryEventTypelv(params);
				let targetSelect = this.reportData.find(select => select.field == targetField);

				let options = [];

				if (targetSelect.field == 'eventTypeLv3') {
					options = data.slice(0).map(item => {

						let obj = {
							text: item.name,
							value: item.id
						}

						Object.assign(obj, item);

						return obj;
					})
				} else {
					options = data.slice(0);
				}

				targetSelect.options = options;
			},
			bindSwiperChange(e, field) {
				let index = e.detail.current;
				let swiper = this.reportData.find(item => item.field == field);

				swiper.index = index;
			},
			
			selectTypelv3(type){
				let values = type;
				let select = this.reportData.find(item => item.field == 'eventTypeLv3');
				
				select.value = values['value'];
				
				let index = select.options.findIndex(item => item.value == select.value);
				
				if (select.targetField) {
					this.createSwiper(select.targetField, select.options[index]['images']);
				}
				
				this.$refs.typeLv3.close();
			},
			bindPickerChange2(field) {
				this.typeLv3s = [];
				
				let select = this.reportData.find(item => item.field == field);
				
				this.typeLv3s = select.options.slice(0);
				
				if(this.typeLv3s.length > 0){
					this.$refs.typeLv3.open();
				}
				
			},
			bindPickerChange(e, field) {
				let index = e.detail.value;
				let select = this.reportData.find(item => item.field == field);

				select.index = index;

				if (select.targetField) {
					this.clearPicker(select.targetField);
				}

				if (!select.options[index]) {
					return
				}

				if (select.field == 'eventType' || select.field == 'eventSrcType') {
					select.value = select.options[index]['code'];
				} else {
					select.value = select.options[index]['id']
				}

				if (select.field == 'eventSrcType') {
					let afterImg = this.reportData.find(item => item.field == 'afterImg');

					afterImg.isHide = (select.value == 5);
				}

				if (!select.targetField) {
					return
				}

				this.createPicker(select.targetField, select.value);
			},
			async getAllDicts() {
				let ds = [queryEventType()];
				let dits = await Promise.all(ds);

				this.reportData.forEach(item => {
					if (item.field == 'eventType') {
						item.options = dits[0].data.slice(0);
					}
				})
			},
			async setVal() {
				this.reportData.forEach(item => {
					if (item.field == 'eventSrcType') {
						item.value = '5';

						item.options.forEach((it, ind) => {
							if (it.code == item.value) {
								item.index = ind;
							}
						})
					} else {

					}
				})

				if (this.longitude) {
					let addr = this.reportData.find(item => item.field == 'eventAddress');
					let { address } = await reverseGeocode(this.longitude, this.latitude);

					addr.value = address;
				}
			},
			getPos(pos) {
				this.longitude = pos.longitude;
				this.latitude = pos.latitude;
				
				this.xjyIds = pos.xjyIds;
				
				let addr = this.reportData.find(item => item.field == 'eventAddress');

				addr.value = pos.address;
			},
			changeLength(e, field) {
				let tipsItem = this.reportData.find(item => item.field == field);

				tipsItem.tips = `*字数限制250,剩余字数${250 -(tipsItem.value.length) > 0 ? 250 -(tipsItem.value.length) : 0 }/250`
			},
			async getPic(obj) {
				let compressedItem = this.reportData.find(item => item.field == 'compress');
				let isCompressed = compressedItem.value;
					
				let res = await chooseImage({}, isCompressed).catch((err) => {});
					
				if(res){
					let tempFilePaths = res.tempFilePaths.slice(0);
						
					obj.images = obj.images.concat(tempFilePaths);
				}
			},
			async getPic2() {},
			delPic(obj, index) {
				obj.images.splice(index, 1);
			},
			viewPic(obj, index) {
				previewImage({
					urls: obj.images,
					current: index
				})
			},
			switchChange(e, field) {
				let compressedItem = this.reportData.find(item => item.field == field);
				
				compressedItem.value = e.detail.value;
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			async init() {
				let userInfo = getUserInfo();

				if (userInfo) {
					this.roleKey = userInfo['roles'][0]['roleKey'];
					this.userInfo = userInfo;
				}
				
				this.setVal();
				
				await this.getAllDicts();
			}
		},
		async onLoad(option) {
			this.longitude = option.lng;
			this.latitude = option.lat;
		
			uni.$on('case/report/getPos', this.getPos);
	
			await this.init();
		},
		onReady() {},
		onUnload() {
			uni.$off('case/report/getPos');
		},
		onBackPress(options) {
			let _this = this;

			if (options.from === 'navigateBack') {
				return false;
			}

			uni.showModal({
				content: '确定退出当前页面吗？',
				success(res) {
					if (res.confirm) {
						_this.back();
					} else if (res.cancel) {

					}
				}
			});

			return true;
		}
	}
</script>

<style lang="scss">
	.report {
		padding-bottom: 40rpx;
	}

	.form {}

	.form-a {
		margin-bottom: 60rpx;

		.form-group {
			padding: 0rpx 30rpx;

			.form-item {
				margin-bottom: 40rpx;

				.form-item-header {
					margin-bottom: 20rpx;
					padding: 13rpx 0rpx 13rpx 0rpx;
					font-size: 28rpx;
					line-height: 120%;
					color: #5d5d5d;
				}

				.form-item-body {
					padding: 0rpx 0rpx 0rpx 0rpx;
					
					.form-control-static {
						min-height: 200rpx;
						padding: 20rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						background-color: #ececec;
						box-sizing: border-box;
					}

					.form-control {
						width: 100%;
						font-size: 28rpx;
						border-radius: 10rpx;
						line-height: 120%;
						box-sizing: border-box;
						border: 1px solid #c4c4c4;
						height: 56rpx;
						padding: 6rpx 16rpx;

						&.form-control-a {
							height: 200rpx;
							padding: 20rpx;
						}
					}
				}

				&.form-item-hor {
					display: flex;

					.form-item-header {
						width: 140rpx;
						box-sizing: border-box;
						margin-bottom: 0rpx;
					}

					.form-item-body {
						padding: 0rpx 0rpx 0rpx 0rpx;
						width: calc(100% - 140rpx);
						box-sizing: border-box;
					}
				}
			}

			.form-item-tip {
				padding: 8rpx 0rpx;
				font-size: 28rpx;
				line-height: 120%;
				color: #d81e06;
			}
		}
	}

	.btns {
		background-color: #ffffff;

		.btns-group {
			padding: 17rpx 30rpx;
			display: flex;

			.btns-item {
				width: 50%;
				padding: 0rpx 10rpx;
			}
		}

	}

	.btn {
		width: 100%;
		padding: 20rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 6rpx;
		background: none;

		&:after {
			display: none;
		}

		&.btn-a {
			background-color: #f29004;
		}
	}

	.select {
		border: 1rpx solid #c4c4c4;
		border-radius: 10rpx;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.selected {
			padding: 10rpx 52rpx 10rpx 16rpx;
			font-size: 28rpx;
			line-height: 32rpx;
			color: #5d5d5d;
		}

		.select-icon {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.search-wrap {
		padding: 10rpx 0rpx;
	}

	.search {
		display: flex;
		justify-content: space-between;

		.search-control {
			width: calc(100% - 160rpx);
			padding: 18rpx;
			font-size: 28rpx;
			line-height: 32rpx;
			border: 1rpx solid #f29004;
			border-radius: 10rpx;
		}

		.search-btn {
			width: 100rpx;
			padding: 20rpx 0rpx;
			margin: 0rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			background-color: #f29004;
			color: #ffffff;
		}
	}

	.card {}

	.card-address {
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-content {
			height: 120rpx;
			margin: 0rpx 100rpx 0rpx 0rpx;
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			line-height: 120%;
			box-sizing: border-box;
			border: 1px solid #c4c4c4;
		}

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			margin: 20rpx 0rpx 20rpx 10rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.card-a {
		width: 223rpx;
		margin: 0rpx auto;
		border-radius: 5rpx;
		border: 1rpx solid #a2a2a2;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-body {
			height: 143rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		&.upload {
			border: none;
		}

		.card-header {
			width: 100%;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			background-color: #000000;
			opacity: 0.3;
			z-index: 2;
		}

		.delete {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 20rpx;
				height: 20rpx;
			}
		}

	}

	.list {
		&.list-p {
			.list-group {
				display: flex;
				flex-wrap: wrap;

				.list-item {
					margin-bottom: 20rpx;
					width: 33.33%;
				}
			}
		}

		&.list-types {
			width: 600rpx;
			min-height: 600rpx;
			background-color: #ffffff;

			.list-group {
				padding: 30rpx 0rpx 0rpx;

				.list-item {
					margin-bottom: 10rpx;
					position: relative;
					top: 0rpx;
					left: 0rpx;

					&:after {
						content: '';
						background-color: #999;
						opacity: 0.5;
						height: 1rpx;
						position: absolute;
						right: 20rpx;
						bottom: 0rpx;
						left: 20rpx;
					}

					.list-item-btn {
						padding: 18rpx 20rpx;
						font-size: 28rpx;
						line-height: 120%;
						color: #5d5d5d;
					}
				}
			}
		}
	}

	.swiper-item {
		.image {
			width: 100%;
			height: 300rpx;
		}
	}
	
	.switch{
		height: 57rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	
	/deep/ .uni-switch-input{
		height: 22px;
		&:after{
			height: 20px;
		}
		&:before{
			height: 20px;
		}
	}
</style>
